import {Button, Card, Col, Divider, Empty, message, Row, Space, Tag, Typography} from "antd";
import {
    ClusterOutlined,
    DatabaseOutlined,
    EyeOutlined,
    FileTextOutlined,
    HistoryOutlined,
    UserOutlined
} from "@ant-design/icons";
import NacosYamlModal from "./NacosYamlModal";
import {useState} from "react";
import RequestUtils from "../../utils/RequestUtils";
import Apis from "../../configs/Apis";

const {Title, Text, Paragraph} = Typography;

const NacosYamlList = (props) => {
    const {yamlConfigs = []} = props;

    const [messageApi, contextHolder] = message.useMessage();

    const [yamlConfigDetailParam, setYamlConfigDetailParam] = useState({
        visible: false,
        damlDataId: ""
    });
    const [yamlContent, setYamlContent] = useState("");

    /**
     * 根据id查询yaml详情
     * @param yamlDataId
     */
    const doSearchYamlConfigById = (yamlDataId) => {
        RequestUtils.post(Apis.Nacos.searchYamlConfigById, {
            dataId: yamlDataId
        }).then(res => {
            setYamlContent(res.yamlContent)
        }).catch(err => {
            messageApi.error("查询YAML配置详情失败: " + err.message);
        })
    }

    // 随机生成柔和的卡片背景色
    const getRandomLightColor = (index) => {
        const colors = [
            "rgba(64, 169, 255, 0.05)", // 浅蓝
            "rgba(102, 16, 242, 0.05)", // 浅紫
            "rgba(25, 135, 84, 0.05)", // 浅绿
            "rgba(245, 158, 11, 0.05)", // 浅黄
        ];
        return colors[index % colors.length];
    };

    return (
        <div style={{
            padding: "24px",
            backgroundColor: "#f9fafb",
            minHeight: "100vh"
        }}>
            {contextHolder}

            {/* 外层增强版白色Card */}
            <Card
                bordered={false}
                style={{
                    backgroundColor: "#ffffff", // 纯净的白色背景
                    borderRadius: "12px",
                    boxShadow: "0 3px 15px rgba(0, 0, 0, 0.03)",
                    padding: "24px",
                    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)", // 平滑过渡效果
                }}
                onMouseEnter={(e) => {
                    // 鼠标悬停时的效果 - 移除了边框设置
                    e.currentTarget.style.transform = "translateY(-3px)";
                    e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.08)";
                }}
                onMouseLeave={(e) => {
                    // 鼠标离开时恢复原状 - 移除了边框设置
                    e.currentTarget.style.transform = "translateY(0)";
                    e.currentTarget.style.boxShadow = "0 3px 15px rgba(0, 0, 0, 0.03)";
                }}
            >
                {/* 页面头部 */}
                <div style={{marginBottom: "32px", textAlign: "center"}}>
                    <Title level={2} style={{
                        color: "#165DFF",
                        display: "inline-flex",
                        alignItems: "center",
                        marginBottom: "8px"
                    }}>
                        <FileTextOutlined style={{marginRight: "12px", fontSize: "28px"}}/>
                        Nacos YAML 配置列表
                    </Title>
                    <Paragraph type="secondary" style={{maxWidth: "800px", margin: "0 auto"}}>
                        展示从 Nacos 同步的 YAML 配置信息，包含数据ID和所属分组
                    </Paragraph>
                </div>

                {/* 配置列表区域 */}
                <div>
                    {yamlConfigs.length > 0 ? (
                        <Row gutter={[24, 24]}>
                            {yamlConfigs.map((item, index) => (
                                <Col xs={24} sm={12} lg={8} key={`${item.yamlDataId}-${index}`}>
                                    <Card
                                        hoverable
                                        bordered={false}
                                        style={{
                                            backgroundColor: getRandomLightColor(index),
                                            borderRadius: "12px",
                                            transition: "all 0.3s ease",
                                            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.05)",
                                        }}
                                        onMouseEnter={(e) => {
                                            e.currentTarget.style.transform = "translateY(-4px)";
                                            e.currentTarget.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.08)";
                                        }}
                                        onMouseLeave={(e) => {
                                            e.currentTarget.style.transform = "translateY(0)";
                                            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.05)";
                                        }}
                                    >
                                        {/* 卡片内容保持不变 */}
                                        <div style={{padding: "16px"}}>
                                            <div style={{marginBottom: "16px", textAlign: "right"}}>
                                                <Tag icon={<DatabaseOutlined/>} color="blue">
                                                    YAML 配置
                                                </Tag>
                                            </div>

                                            <div style={{marginBottom: "12px"}}>
                                                <Space size="middle" align="center">
                                                    <FileTextOutlined style={{color: "#165DFF"}}/>
                                                    <Text strong style={{fontSize: "15px"}}>数据ID</Text>
                                                </Space>
                                                <Paragraph
                                                    style={{
                                                        marginTop: "8px",
                                                        wordBreak: "break-all",
                                                        paddingLeft: "28px",
                                                        color: "#333"
                                                    }}
                                                >
                                                    {item.yamlDataId}
                                                </Paragraph>
                                            </div>

                                            <Divider style={{margin: "12px 0", backgroundColor: "rgba(0,0,0,0.05)"}}/>

                                            <div style={{marginBottom: "16px"}}>
                                                <Space size="middle" align="center">
                                                    <ClusterOutlined style={{color: "#722ED1"}}/>
                                                    <Text strong style={{fontSize: "15px"}}>所属分组</Text>
                                                </Space>
                                                <Paragraph
                                                    style={{
                                                        marginTop: "8px",
                                                        wordBreak: "break-all",
                                                        paddingLeft: "28px",
                                                        color: "#333"
                                                    }}
                                                >
                                                    {item.yamlGroup}
                                                </Paragraph>
                                            </div>

                                            <Divider style={{margin: "12px 0", backgroundColor: "rgba(0,0,0,0.05)"}}/>

                                            <div style={{marginBottom: "16px"}}>
                                                <Space size="middle" align="center">
                                                    <HistoryOutlined style={{color: "#722ED1"}}/>
                                                    <Text strong style={{fontSize: "15px"}}>同步时间</Text>
                                                </Space>
                                                <Paragraph
                                                    style={{
                                                        marginTop: "8px",
                                                        wordBreak: "break-all",
                                                        paddingLeft: "28px",
                                                        color: "#333"
                                                    }}
                                                >
                                                    {item.lastModifiedTime}
                                                </Paragraph>
                                            </div>

                                            <Divider style={{margin: "12px 0", backgroundColor: "rgba(0,0,0,0.05)"}}/>

                                            <div style={{marginBottom: "16px"}}>
                                                <Space size="middle" align="center">
                                                    <UserOutlined style={{color: "#722ED1"}}/>
                                                    <Text strong style={{fontSize: "15px"}}>最后一次同步操作人</Text>
                                                </Space>
                                                <Paragraph
                                                    style={{
                                                        marginTop: "8px",
                                                        wordBreak: "break-all",
                                                        paddingLeft: "28px",
                                                        color: "#333"
                                                    }}
                                                >
                                                    {item.lastModifiedByUserNickname}
                                                </Paragraph>
                                            </div>

                                            <div style={{textAlign: "right", marginTop: "16px"}}>
                                                <Button
                                                    type="primary"
                                                    size="middle"
                                                    icon={<EyeOutlined/>}
                                                    style={{
                                                        borderRadius: "6px",
                                                        transition: "all 0.2s ease",
                                                    }}
                                                    hoverStyle={{
                                                        transform: "scale(1.05)",
                                                    }}
                                                    onClick={() => {
                                                        setYamlConfigDetailParam({
                                                            visible: true,
                                                            yamlDataId: item.yamlDataId,
                                                            yamlContent: item.yamlContent,
                                                        });
                                                        doSearchYamlConfigById(item.yamlDataId);
                                                    }}
                                                >
                                                    查看详情
                                                </Button>
                                            </div>
                                        </div>
                                    </Card>
                                </Col>
                            ))}
                        </Row>
                    ) : (
                        <div style={{
                            padding: "48px 24px",
                            textAlign: "center",
                        }}>
                            <Empty
                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                description={
                                    <Text style={{color: "#666"}}>暂无 YAML 配置信息</Text>
                                }
                            >
                                <Button type="primary" icon={<FileTextOutlined/>}>
                                    刷新配置
                                </Button>
                            </Empty>
                        </div>
                    )}
                </div>
            </Card>

            {/* yaml详情modal */}
            <NacosYamlModal
                yamlConfigDetailParam={yamlConfigDetailParam}
                setYamlConfigDetailParam={setYamlConfigDetailParam}
                yamlContent={yamlContent}
            />

        </div>
    );
};

export default NacosYamlList;
